<template>
  <div id="main" class="tubiao" />
</template>>

<script>
const echarts = require('echarts/lib/echarts')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/grid')
require('echarts/lib/component/legend')
require('echarts/lib/chart/bar')
require('echarts/lib/component/markLine')
require('echarts/lib/component/markPoint')
export default {
  mounted() {
    var chartDom = document.getElementById('main')
    var myChart = echarts.init(chartDom)
    var option

    option = {
      title: {
        text: '价格数量分布',
        subtext: 'Hello!'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['公寓', '别墅', '商铺']
      },
      toolbox: {
        show: true,
        feature: {
          dataView: { show: false, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          //   prettier-ignore
          data: ['1000', '2000', '3000', '4000', '5000']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '公寓',
          type: 'bar',
          data: [
            20, 49, 70, 232, 25, 76, 135, 162, 32, 20, 64, 33
          ]
        },
        {
          name: '别墅',
          type: 'bar',
          data: [
            23, 23, 23, 23.2, 25.6, 76.7, 23, 162.2, 23, 20.0, 23, 23
          ]
        },
        {
          name: '商铺',
          type: 'bar',
          data: [
            66, 55, 99, 26, 287, 70.7, 175.6, 182.2, 48.7, 188, 60, 23
          ]
        }
      ]
    }
    option && myChart.setOption(option)
  }
}
</script>

<style scoped>
.tubiao{
    /* display: inline-block; */
    width: 430px;
    height: 300px;
}
</style>
